<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta charset="utf-8" name="viewport" content="width=640,user-scalable=no">
		<title>购物车</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="css/购物车.css"/>
	</head>
	<body>
		<div id="gwc"><!-- 大盒子 -->
			<div>
			<div id="hsf"><!-- div -->
				<div id="hsf_yuan">		<!-- :class="kk.idx==index?'hsf_red':'hsf_white'" -->
					<div @click="jabtn()" class="hsf_white" id="hsf_yuan_center">√</div>
				</div>
				<div class="hsf_neirong_box7" id="qiaokeli">
					<div class="box7_shangpin">
						<img src="img/sc_12_1.jpg" >
						<div>巧罗进口料手工黑松露巧克力礼盒8口味400g零食包邮</div>
					</div>
					<div class="box7_shuliang">
						<div class="jiage">价格：￥{{jiage}}</div>
						<div class="btn_danji" id="jiajian">
							<button @click="jian()" class="btn_jian" >-</button>
							<div class="shuliang">{{shuliang}}</div>
							<button @click="jia()" class="btn_jia"x>+</button>
						</div>
					</div>
				</div>
			</div>
			<div id="hsf"><!-- div -->
				<div id="hsf_yuan">		<!-- :class="kk.idx==index?'hsf_red':'hsf_white'" -->
					<div @click="jabtn2()" class="hsf_white"  id="hsf_yuan_center2">√</div>
				</div>
				<div class="hsf_neirong_box7" id="qiaokeli">
					<div class="box7_shangpin">
						<img src="img/sc_12_1.jpg" >
						<div>巧罗进口料手工黑松露巧克力礼盒8口味400g零食包邮</div>
					</div>
					<div class="box7_shuliang">
						<div class="jiage">价格：￥{{jiage2}}</div>
						<div class="btn_danji" id="jiajian">
							<button @click="jianjian()" class="btn_jian" >-</button>
							<div class="shuliang">{{shuliang2}}</div>
							<button @click="jiajia()" class="btn_jia"x>+</button>
						</div>
					</div>
				</div>
			</div>
			<div id="hsf_dibu">
				<p id="hsf_p">总价格：<span id="btn">￥{{m}}</span></p>
				<a href="#" id="aaa"><div id="hsf_zs" @click="qujiesuan()">去结算( {{zs}} )</div></a>
			</div>
			<!-- ======================== -->			
			</div>
			<!-- ======================== -->
			
		</div>
	</body>
	<script type="text/javascript">
		var gwc = new Vue({
			el:"#gwc",
			data:{
				jiage:1200,
				shuliang:1,
				m:0,
				zs:0,
				jiage2:1200,
				shuliang2:1,
				idx:-1,
				b1fass:true,
				b1fass2:true,
				zhi:0,
			},
			methods:{
				jian(u1){
					if(this.shuliang<2){
						this.shuliang==1;
					}else{
						this.shuliang--;
						if(this.b1fass == false){
							this.m -= this.jiage;
							this.zs--;
						}
					}
				},
				jia(u1){
					if(this.jiage<1200){
						this.jiage==1200;
					}else{
						this.shuliang++;
					}
					if(this.b1fass == false){
						this.m += this.jiage;
						this.zs++;
					}
				},
				jianjian(u1){
					if(this.shuliang2<2){
						this.shuliang2==1;
					}else{
						this.shuliang2--;
						if(this.b1fass2 == false){
							this.m -= this.jiage2;
							this.zs--;
						}
					}
				},
				jiajia(u1){
					if(this.jiage2<1200){
						this.jiage2==1200;
					}else{
						this.shuliang2++;
					}
					if(this.b1fass2 == false){
						this.m += this.jiage2;
						this.zs++;
					}
				},
				jabtn(u1){
					if(this.b1fass){
						document.getElementById('hsf_yuan_center').className='hsf_red';
						this.m= this.shuliang *1200;
						this.zs=this.shuliang;
						if(this.b1fass2 == false){
							this.m= this.shuliang *1200 + this.shuliang2 *1200;
							this.zs=this.shuliang+this.shuliang2;
						}
					}else{
						document.getElementById('hsf_yuan_center').className='hsf_white';
						this.m=0;
						this.zs=0;
						if(this.b1fass2 == false){
							this.m= this.shuliang2 *1200;
						}
						if(this.b1fass2 == false){
							this.zs= this.shuliang2 ;
						}
					}
					this.b1fass=!this.b1fass;
				},
				jabtn2(){
					if(this.b1fass2){
						document.getElementById('hsf_yuan_center2').className='hsf_red';
						this.m= this.shuliang2 *1200;
						this.zs=this.shuliang2;
						if(this.b1fass == false){
							this.m= this.shuliang *1200 + this.shuliang2 *1200;
							this.zs=this.shuliang+this.shuliang2;
						}
					}else{
						document.getElementById('hsf_yuan_center2').className='hsf_white';
						this.m=0;
						this.zs=0;
						if(this.b1fass == false){
							this.m= this.shuliang *1200;
						}
						if(this.b1fass == false){
							this.zs= this.shuliang ;
						}
					}
					this.b1fass2=!this.b1fass2;
				},
				qujiesuan(){
					var hsf_zs = document.getElementById('hsf_zs');
					var aaa = document.getElementById('aaa');
					var numm = 0;
					// hsf_zs.onclick=function(){
					// 	localStorage.clear("jiesuan");
					// }	
					if(this.m==0){
						alert('您未选择商品，请选择商品！');
						aaa.href="#";
					}else{
						aaa.href="确认订单.html";
						localStorage.setItem("jiesuan",this.m);
						localStorage.setItem("nuu",this.zhi=1);
						localStorage.setItem("zzs",this.zs);
						numm = 1;
					}
					
					// if(zhi){确认订单.html
						// localStorage.setItem("jiesuan",this.m);
					// }else{
						// localStorage.clear("jiesuan");
					// }
					// this.zhi = !this.zhi;
				},
				qingc(){
					if(numm = 1){
						localStorage.removeItem("jiesuan");
						localStorage.removeItem("zzs");
					}
				}
					
			},
			mounted(){
				this.qingc();
			}
			
		})
	</script>
	<script type="text/javascript">
		// var hsf_zs = document.getElementById('hsf_zs');
		// hsf_zs.onclick=function(){
		// 	localStorage.setItem("jiesuan",this.m);
		// }
		// localStorage.clear("jiesuan");
	</script>
</html>